// 在该js 文件中, 自定义一个useOnLine 的hook 函数.
// 该函数实现了一个可以获取当前浏览器在线状态的一个效果
// 可以在不同的组件中使用

// 步骤:
// 第一步:定义一个 use开头的函数
// 第二步: 该函数的返回值为是否在线的一个状态, 因为该hook是一个函数, 要在不同的组件中引入
// 调用

import { useEffect, useState } from 'react';
export const useOnLine = () => {
    const [online, setOnline] = useState(navigator.onLine)

    const on = () => {
        console.log('在线');
        setOnline(true)
    }

    const off = () => {
        console.log('离线');
        setOnline(false)
    }

    useEffect(() => {
        // console.log('初始化')
        window.addEventListener('online', on)

        window.addEventListener('offline', off)

        return () => {
            // console.log('return');
            window.removeEventListener('online', on)
            window.removeEventListener('offline', off)
        }
    })


    return online
}



